<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易商品管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        h2 {
            margin-top: 20px;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        table,
        th,
        td {
            border: 1px solid #ccc;
        }

        th,
        td {
            padding: 8px;
            text-align: left;
        }

        button {
            padding: 5px 10px;
            margin-right: 5px;
        }

     .btn-primary {
            background-color: #007bff;
            color: white;
            border: none;
        }

     .btn-success {
            background-color: #28a745;
            color: white;
            border: none;
        }

     .btn-danger {
            background-color: #dc3545;
            color: white;
            border: none;
        }
    </style>
    <!-- 更换CDN链接，可根据实际情况调整 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <h2>简易商品管理系统</h2>
        <form>
            <label for="name">商品名:</label><br>
            <input type="text" id="name" v-model="newProduct.name" placeholder="输入商品名"><br>
            <label for="price">价格:</label><br>
            <input type="number" id="price" v-model="newProduct.price" placeholder="0"><br>
            <button type="button" class="btn-primary" @click="addProduct">新增商品</button>
        </form>
        <h2>商品信息</h2>
        <button @click="showAveragePrice">显示所有商品的平均价格</button>
        <button @click="sortProducts">按升序显示所有商品的价格</button>
        <table>
            <thead>
                <tr>
                    <th>商品名</th>
                    <th>价格</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(product, index) in products" :key="index">
                    <td>{{ product.name }}</td>
                    <td>{{ product.price }}</td>
                    <td>
                        <button class="btn-success" @click="editProduct(index)">修改</button>
                        <button class="btn-danger" @click="deleteProduct(index)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <label for="search">vue按商品名搜索:</label>
        <input type="text" id="search" v-model="searchTerm">
        <button @click="searchProducts">搜索</button>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            new Vue({
                el: '#app',
                data: {
                    newProduct: {
                        name: '',
                        price: 0
                    },
                    products: [
                        { name: '饮料', price: 20 },
                        { name: '蜜饯', price: 22 },
                        { name: '饼干', price: 21 },
                        { name: '糖果', price: 20 }
                    ],
                    searchTerm: ''
                },
                methods: {
                    addProduct() {
                        if (this.newProduct.name && this.newProduct.price) {
                            this.products.push({
                                name: this.newProduct.name,
                                price: this.newProduct.price
                            });
                            this.newProduct.name = '';
                            this.newProduct.price = 0;
                        }
                        console.log('addProduct后products:', this.products);
                    },
                    editProduct(index) {
                        // 这里可以添加编辑逻辑，例如弹出编辑框等
                        console.log('编辑商品', this.products[index]);
                    },
                    deleteProduct(index) {
                        this.products.splice(index, 1);
                        console.log('deleteProduct后products:', this.products);
                    },
                    showAveragePrice() {
                        if (this.products.length === 0) {
                            alert('没有商品数据');
                            return;
                        }
                        const total = this.products.reduce((acc, product) => acc + product.price, 0);
                        const average = total / this.products.length;
                        alert(`所有商品的平均价格是: ${average}`);
                    },
                    sortProducts() {
                        this.products.sort((a, b) => a.price - b.price);
                        console.log('sortProducts后products:', this.products);
                    },
                    searchProducts() {
                        if (!this.searchTerm) {
                            // 恢复原始数据展示
                            this.products = [
                                { name: '饮料', price: 20 },
                                { name: '蜜饯', price: 22 },
                                { name: '饼干', price: 21 },
                                { name: '糖果', price: 20 }
                            ];
                            console.log('searchProducts搜索词为空时products:', this.products);
                            return;
                        }
                        // 筛选符合条件的数据
                        const filteredProducts = this.products.filter(product => product.name.includes(this.searchTerm));
                        // 更新展示数据
                        this.products = filteredProducts;
                        console.log('searchProducts筛选后products:', this.products);
                    }
                }
            });
        });
    </script>
</body>

</html>